import Taro,{Component} from "@tarojs/taro"
import styles from '../index.module.scss'
import { View, Input, Button, Label} from "@tarojs/components"
import { AtIcon } from 'taro-ui'
import { verifySms ,sendSms } from '@/api/index'
import {connect} from '@tarojs/redux'
import {telTimeFun } from '@/actions/login'
import { toggleLogin, setInfo, toggleSign } from '@/actions/user'
import { dialog } from '@/util/index';

@connect(({login}) => ({
  tel: login.tel,
  telTime:login.telTime
}),dispatch => ({
  setTelTime:(data) => dispatch(telTimeFun(data)),
  toggleLogin: (data) => dispatch(toggleLogin(data)),
  setInfo: (data) => dispatch(setInfo(data)),
  toggleSign: data => dispatch(toggleSign(data))
}))


class verifyMsg extends Component {
  state = {
    codeSms:'',
    timeout:60
  }


  componentWillReceiveProps(nextProps){
    if(nextProps.telTime == 1){
      this.getTimeout()
    }
  }

  sendCode = async() => {
    try {
      const { data } = await sendSms({mobile: this.props.tel});
      this.getTimeout()
    } catch(e) {
      return dialog.toast({title: e.message});
    }
  }

  verifyCode = async(smsCode) => {
    try {
      const { toggleLogin, toggleSign, setInfo } = this.props
      const { data, code, msg } = await verifySms({mobile: this.props.tel,code:smsCode});
      Taro.hideKeyboard({complete: res => { console.log('hideKeyboard res', res) }})
      toggleLogin(true)
      setInfo({mobile: this.props.tel})
      if (code === 4) {
        toggleSign(true)
        return Taro.reLaunch({url: '/pages/taskSquare/index'})
      }
      Taro.navigateTo({url: '/pages/sign/index'})
    } catch(e) {
      this.setState({codeSms:''});
      return dialog.toast({title: e.message});
    }
  }


  getTimeout = () => {
    clearInterval(this.interval);
    this.setState({timeout:60,codeSms:''});
    this.interval = setInterval(() => {
      if (this.state.timeout > 0) {
        this.setState(pre=> ({timeout: pre.timeout-1}))
      } else {
        clearInterval(this.interval);
      }
    }, 1000)
  }

  inputCode = (e)=>{
    this.setState({codeSms: e.detail.value})
    if(e.detail.value.length >= 6){
      this.verifyCode(e.detail.value)
    }
  }

  updateMobile = () => {
    const { setTelTime } = this.props
    setTelTime(0)
  }

  render () {
    const { timeout ,codeSms } = this.state;
    return (
     <View className={styles.verifyMsg}>
        <View className={styles.verifyWrap}>
          <AtIcon value='iconfont icon-ok' size='20' color='#22ADF7'></AtIcon>
          <View className={styles.info}>验证码已发送至</View>
          <View className={styles.mobile}>{this.props.tel}</View>
          <View className={styles.update} onClick={this.updateMobile}>更改</View>
        </View>
        <Label for="msg_input" className={styles.numWrap}>
          <View className={styles.num}>{codeSms.substring(0,1)}</View>
          <View className={styles.num}>{codeSms.substring(1,2)}</View>
          <View className={styles.num}>{codeSms.substring(2,3)}</View>
          <View className={styles.num}>{codeSms.substring(3,4)}</View>
          <View className={styles.num}>{codeSms.substring(4,5)}</View>
          <View className={styles.num}>{codeSms.substring(5,6)}</View>
          <Input autoFocus className={styles.numInput} value={codeSms} id="msg_input" type={'number'} maxLength={6} cursor={-100} onInput={(e)=>this.inputCode(e)}></Input>
        </Label>
        <View className={styles.countDownWrap} style={ timeout<=0 ?'display:none':'display:block'}>
          <View className={styles.countDown}>{timeout}s</View>后重新发送
        </View>
        <Button className={styles.confirm} onClick={this.sendCode} style={timeout<=0?'display:block':'display:none'}>重新发送</Button>
     </View>
    )
  }
}

export default verifyMsg
